<template>
  <a-modal
    v-model:visible="visible"
    class="wrap"
    :body-style="{ padding: '5px 10px 0 16px' }"
    v-bind="$attrs"
    :after-close="remove"
    :closable="false"
    width="80%"
  >
    <modal-header :title="title">
      <template #right>
        <close-outlined
          style="font-size: 16px; color: gray"
          @click="visible = false"
        ></close-outlined>
      </template>
    </modal-header>

    <div class="info">
      <div class="info-1">编号：{{ fields.reportNumber }}</div>
      <div class="info-2">
        <div>报表名称：{{ fields.reportName }}</div>
        <div>报送时间：{{ fields.reportTime }}</div>
      </div>
      <div class="info-3">
        <div>报表频度：{{ fields.reportFrequency }}</div>
        <div>数据日期：{{ fields.dataTime }}</div>
      </div>
      <div class="info-4">监管单位：{{ regulationDept }}</div>
      <a-divider></a-divider>
    </div>

    <div class="gather">
      <div class="gather-left">
        <div style="height: 20px; font-weight: bold">目录模板</div>
        <div>
          <preview-excel
            ref="previewExcelRef"
            :url="dirTemplate"
            style="height: 220px; margin: 10px 40px 5px 20px"
          ></preview-excel>
          <div style="display: flex; align-items: center; margin: 0 0 10px 20px">
            <icon-font type="icon-excel" size="26"></icon-font>
            <a :href="dirTemplate" style="margin-left: 5px">下载</a>
          </div>
        </div>
      </div>
      <div class="gather-right">
        <custom-upload
          :dir-statement-id="fields.dirStatementId"
          :dir-id="fields.dirId"
          action="/statement/dir-statement/uploadStatement"
        ></custom-upload>
      </div>
    </div>

    <template #footer>
      <div class="footer">
        <div class="footer-action">
          <a-button @click="handlePush">推送</a-button>
          <a-button v-if="fields?.status?.name !== '部门待经办'" @click="handleBack">退回</a-button>
          <a-button @click="visible = false">取消</a-button>
        </div>
      </div>
    </template>
  </a-modal>

  <custom-modal
    :visible="opinionVisible"
    title="情况说明或审批意见"
    default-footer
    :handle-ok="handleOk"
    :loading-ok="loadingOk"
    centered
  >
    <a-textarea v-model:value="opinion" placeholder="请输入审批意见" :rows="5" />
  </custom-modal>
</template>

<script lang="ts">
  import { defineComponent, nextTick, reactive, ref, toRefs } from 'vue'
  import { Modal, Button, Form, Input, Divider } from 'ant-design-vue'
  import { CloseOutlined } from '@ant-design/icons-vue'
  import ModalHeader from '@/components/ModalHeader.vue'
  import CustomUpload from '@/components/CustomUpload.vue'
  import PreviewExcel from '@/components/PreviewExcel.vue'
  import { getReportingDetail } from '@/api/report'
  import CustomModal from '@/components/CustomModal.vue'
  import { approve } from '@/api/flow'
  import { useUserStore } from '@/store/modules/user'
  import { IconFont } from '@/components/iconfont'

  export default defineComponent({
    name: 'CheckModal',
    components: {
      CustomModal,
      IconFont,
      PreviewExcel,
      CustomUpload,
      ModalHeader,
      [Divider.name]: Divider,
      [Modal.name]: Modal,
      [Form.name]: Form,
      [Input.TextArea.name]: Input.TextArea,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Button.name]: Button,
      CloseOutlined
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      remove: {
        type: Function
      },
      fields: {
        type: Object,
        default: () => ({})
      }
    },
    setup(props) {
      const state = reactive({
        visible: true,
        loadingSave: false,
        loadingOk: false,
        opinionVisible: false,
        regulationDept: '',
        opinion: '',
        dirFlowStatus: 0,
        dirTemplate: ''
      })
      const previewExcelRef = ref<any>(null)
      const user = useUserStore()
      console.log(props.fields)

      getReportingDetail({
        dirId: props.fields.dirId,
        dirStatementId: props.fields.dirStatementId
      }).then((res) => {
        state.regulationDept = res.dirSuperviseorg
        state.dirTemplate = res.dirTemplate
        nextTick(() => {
          previewExcelRef.value.previewExcel()
        })
      })

      const showOpinion = () => {
        state.opinionVisible = false
        setTimeout(() => {
          state.opinionVisible = true
        }, 0)
      }

      const handleSave = () => {
        state.loadingSave = true
        setTimeout(() => {
          state.loadingSave = false
          state.visible = false
        }, 2000)
      }

      const handlePush = () => {
        // 待复核 可以 推送、回退；待经办 只能推送
        // 推送/回退前加审批意见
        showOpinion()
        state.dirFlowStatus = 0 // 通过
      }

      const handleBack = () => {
        showOpinion()
        state.dirFlowStatus = 1 // 驳回
      }

      const handleOk = () => {
        state.loadingOk = true
        const dirStatementIds: string[] = []
        dirStatementIds.push(props.fields.dirStatementId)
        approve({
          dirFlowStatus: state.dirFlowStatus,
          dirId: props.fields.dirId,
          dirStatementIds: dirStatementIds,
          dirApproverOpinion: state.opinion,
          dirApproverId: user.userInfo.user_id,
          dirApproverName: user.userInfo.name,
          dirOrgName: user.userInfo.dept_name
        }).then(() => {
          state.loadingOk = false
          state.opinionVisible = false
          state.visible = false
        })
      }

      return {
        ...toRefs(state),
        previewExcelRef,
        handleSave,
        handleOk,
        handleBack,
        handlePush
      }
    }
  })
</script>

<style lang="scss" scoped>
  .gather {
    display: flex;

    .gather-left {
      width: 50%;
      border-right: 1px solid #d9d9d9;
    }

    .gather-right {
      width: 50%;
      padding: 30px 40px 40px;
    }
  }

  .footer-action {
    text-align: center;
  }

  .info {
    padding-top: 10px;

    .info-2,
    .info-3 {
      display: flex;

      div {
        width: 50%;
      }
    }
  }

  .info ::v-deep(.ant-divider-horizontal) {
    margin: 10px 0 0;
  }
</style>
